文章/答案/技术大牛

发布

社区首页 >问答首页 >删除文本/babel类型，允许在浏览器中运行绑定的js文件

问删除文本/babel类型，允许在浏览器中运行绑定的js文件
EN

Stack Overflow用户

提问于 2018-03-10 02:56:25

回答 1查看 250关注 0票数 0

我正在使用browserify将所有需求打包到一个适合于在浏览器环境中运行的捆绑js文件中。运行npm run build-dist命令时，以下代码运行良好。现在如何更改package.json文件以从index.html文件中删除type="text/babel"属性？

index.js:

import React from 'react';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

index.html

<html>
  <head>
    <title>React, Browserify Demo</title>
  </head>
  <body>
    <script src="bundle.min.js" type="text/babel"></script>
  </body>
</html>

package.json

{
  "name": "facebookalbums2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react-dom": "^16.2.0",
    "react-image-lightbox": "^4.5.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",

    "build-dev": "browserify --debug src/index.js > build/bundle.min.js",
    "build-dist": "SET NODE_ENV=production & browserify src/index.js | uglifyjs -m > build/bundle.min.js",

    "watch-dev": "watchify --debug src/index.js -o build/bundle.min.js",
    "watch-dist": "SET NODE_ENV=production & watchify src/index.js | uglifyjs -m -o build/bundle.min.js"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": ["env"],
          "compact":false
        }
      ]
    ]
  },
  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^16.1.1",
    "react": "^16.2.0",
    "uglify-js": "^3.3.13",
    "watchify": "^3.11.0"
  }
}

删除"text/babel“属性时浏览器中的错误：

Uncaught Error: Target container is not a DOM element.
    at invariant (react-dom.development.js?ver=4.9.4:66)
    at renderSubtreeIntoContainer (react-dom.development.js?ver=4.9.4:15854)
    at Object.render (react-dom.development.js?ver=4.9.4:15964)
    at Object.11.react (bundle.min.js?ver=4.9.4:1)
    at f (bundle.min.js?ver=4.9.4:1)
    at s (bundle.min.js?ver=4.9.4:1)
    at bundle.min.js?ver=4.9.4:1

babelify

javascript

reactjs

browserify

babeljs

回答 1

Stack Overflow用户

发布于 2018-03-10 14:31:13

我试图根据我在wordpress插件+ Reactjs代码中看到的内容提供一个简单的示例。在输出代码之前，我需要记住测试我的代码。谢谢大家。

index.html;

<html>
  <head>
    <title>React + Browserify Demo</title>
  </head>
  <body>
        <div id="root"></div>
    <script src="bundle.min.js"></script>
  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49204878

复制

相似问题

问删除文本/babel类型，允许在浏览器中运行绑定的js文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除文本/babel类型，允许在浏览器中运行绑定的js文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除文本/babel类型，允许在浏览器中运行绑定的js文件
EN