GVKun编程网logo

为什么我必须将babel-presets放在.babelrc和webpack.config.js中？

13

以上就是给各位分享为什么我必须将babel-presets放在.babelrc和webpack.config.js中？，同时本文还将给你拓展.babelrc和babel.config.js的相同配置不

以上就是给各位分享为什么我必须将babel-presets放在.babelrc和webpack.config.js中？，同时本文还将给你拓展.babelrc和babel.config.js的相同配置不能合并、babel - 使用Webpack和Babel来搭建React应用程序、babel tsc webpack、Babel 处理 webpack 无法处理的 ES 语法（Babel 6.x 和 Babel 7.x 有区别）（二）等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

为什么我必须将babel-presets放在.babelrc和webpack.config.js中？

为什么我必须将babel-presets放在.babelrc和webpack.config.js中？

好。我正在引导一个简单的应用程序。我正在使用flow.js。我使用的预设是babel-preset-2015，babel-preset-
react和babel-preset-
stage-0。我必须在.babelrc内和webpack.config内放入相同的预设，所有这些预设才能正常工作。例如，如果我从webpack.config中将其移动，则会收到错误消息“未定义反应”。如果删除.babelrc和babel-
register，则会出现错误，因为我使用import和Flow.js批注。为什么会这样呢？如果将预设放入webpack.config中，则应该可以删除.babelrc，反之亦然。这就是我的代码现在全部正常工作的样子（减去一些对该问题不重要的文件）。

start-dev.js

require(''babel-register'')require(''./src/server/index.js'')

index.js

/* @flow */import Express from ''express''import path from ''path''import conf from ''../conf/''const APP_PORT: number = conf.APP_PORTconst PORT = process.env.PORT || APP_PORTconst app: Express = new Express()// Middlewareapp.set(''views'', path.join(__dirname, ''views''))app.set(''view engine'', ''ejs'')app.use(Express.static(path.join(__dirname, ''../'', ''client'', ''dist'')))// Routesapp.get(''*'', function (req: Object, res: Object) {  res.render(''index'')})app.listen(PORT, function () {  console.log(`Express server is up on port ${PORT}`)})

app.js

import React from ''react''import ReactDOM from ''react-dom''ReactDOM.render(  <h1>First</h1>,  document.getElementById(''app''))

package.json

{  "scripts": {    "start-dev": "set \"NODE_ENV=development\" && babel-node ./start-dev.js",    "start": "set \"NODE_ENV=development\" && node ./start-dev.js",    "flow": "./node_modules/.bin/flow check",    "standard": "node_modules/.bin/standard --verbose | node_modules/.bin/snazzy"  },  "dependencies": {    "ejs": "^2.5.6",    "express": "^4.15.2",    "react": "^15.4.2",    "react-dom": "^15.4.2"  },  "devDependencies": {    "babel-cli": "^6.24.0",    "babel-core": "^6.24.0",    "babel-eslint": "^7.2.1",    "babel-loader": "^6.4.1",    "babel-preset-es2015": "^6.24.0",    "babel-preset-react": "^6.23.0",    "babel-preset-stage-0": "^6.22.0",    "babel-register": "^6.24.0",    "eslint": "^3.18.0",    "eslint-config-standard": "^7.1.0",    "eslint-plugin-flowtype": "^2.30.4",    "eslint-plugin-react": "^6.10.3",    "flow-bin": "^0.42.0",    "snazzy": "^6.0.0",    "standard": "^9.0.2",    "webpack": "^2.3.2"  }}

.babelrc

{  "passPerPreset": true,  "presets": [    "es2015",    "react",    "stage-0"  ]}

webpack.config.babel.js

''use strict''import path from ''path''const publicPath = path.resolve(__dirname, ''./src/client'')module.exports = {  devtool: ''#source-maps'',  performance: {    hints: false  },  context: publicPath,  entry: {    bundle: ''./app.js''  },  output: {    path: path.join(publicPath, ''dist''),    filename: ''[name].js'',    publicPath: ''/dist/''  },  resolve: {    extensions: [''.js'', ''.jsx'']  },  module: {    rules: [      {        test: /\.jsx?$/,        exclude: /node_modules/,        loader: ''babel-loader'',        options: {          presets: [            ''react'',            ''es2015'',            ''stage-0''          ]        }      }    ]  }}

答案1

小编典典

如果将预设放入webpack.config中，则应该可以删除.babelrc，反之亦然。

不，不是这样。指定在配置的WebPack预置只会影响的WebPack，其他一切用途巴贝尔（例如babel-node，babel-register等）并不会在意你的WebPack的配置，因此并没有看到他们。

反之亦然。因此，如果有.babelrc，则可以删除webpack预设选项，因为在后台babel-loader使用babel，这显然会尊重.babelrc。

例如，如果我从webpack.config中删除它们，则会收到错误消息React is not defined。

问题是您.babelrc的配置与webpack配置中的配置不同。罪魁祸首是"passPerPreset":true。使用此选项，每个预设都将单独应用，而无需考虑其他预设。因此，顺序很重要。从babel文档-
插件/预设排序：

预设顺序相反（从最后到第一）。

这意味着他们将按照以下顺序应用：stage-0，react，es2015。由于它们是单独应用的，因此react将JSX转换为React.createElement，因为React它在范围内，并且es2015仅将导入转换为_react2.default，因此React不再定义。两个捆绑包之间的整个差异是这样的：

@@ -9470,7 +9470,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de// var React = require(''react'')// var ReactDOM = require(''react-dom'')-_reactDom2.default.render(React.createElement(+_reactDom2.default.render(_react2.default.createElement(  ''h1'',  null,  ''Juhuuuu''

关于的信息不多passPerPreset，但在发行说明中已将其标记为实验性的，您可能应该完全避免使用。

尽管将react预设放在列表的第一位是可行的，但我建议您删除passPerPreset选项，除非您有非常特殊的理由使用它。

{  "presets": [    "es2015",    "react",    "stage-0"  ]}

.babelrc和babel.config.js的相同配置不能合并

.babelrc和babel.config.js的相同配置不能合并

项目内部已经有了babel的配置文件babel.config.js

module.exports = {
  presets: ["@vue/app"],
};

然后由于要按需引入element-ui，就使用了babel-plugin-component，并且配置了.babelrc文件，如下（当然其中涉及到babel7，大家要安装@babel/preset-env,旧的babel-perset-es2015在babel7已经不支持了）

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后发现页面中element-ui的按需引入没有生效，这就奇怪了，后来找了很多问题，发现原来是配置无法合并的问题，导致.babelrc文件的配置根本就没有生效。于是把配置放到了同一个文件就好了，

记得删除另外一份文件（babel.config.js）只保留一个配置文件(.babelrc)。

{
  "presets": ["@vue/app", ["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这样就没问题了

babel - 使用Webpack和Babel来搭建React应用程序

babel - 使用Webpack和Babel来搭建React应用程序

用Webpack(npm install -g webpack)代码打包，Webpack大致需要知道三件事：


1)让Webpack知道应用程序或js文件的根目录
2)让Webpack知道做何种转换
3)让Webpack知道转换后的文件保存在哪里

具体来说，大致要做以下几件事情：

1)在项目根目录下有一个webpack.config.js文件，这个是惯例
2)确保webpack.config.js能导出一个对象


module.exports = {};

3)告诉Webpack入口js文件在哪里

module.exports = { entry: ['./app/index.js'] }

4)告诉Webpack需要哪些转换插件

'./app/index.js'],module: { loaders: [] } }

所有的转换插件放在loaders数组中。

5)设置转换插件的细节

module: { loaders: [ { test: /\.coffee$/,include: __dirname + 'app',loader: "coffee-loader" } ] } }

  • test:运行.coffee结尾的文件
  • include:哪些文件件
  • loader：具体的转换插件

6)告诉Webpack导出到哪里

"coffee-loader" } ] },output: { filename: "index_bundle.js",path: __dirname + '/dist' } }

【文件结构】

app/
.....components/
.....containers/
.....config/
.....utils/
.....index.js
.....index.html
dist/
.....index.html
.....index_bundle.js
package.json
webpack.config.js
.gitignore

我们不禁要问，如何保证app/index.html和dist/index.html同步呢？

如果，我们每次运行webpack命令后，把app/index.html拷贝到dist/index.html中就好了。

解决这个问题的人是：html-webpack-plugin(npm install --save-dev html-webpack-plugin)。

引入html-webpack-plugin之后，webpack.config.js看起来是这样的：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',filename: 'index.html',inject: 'body'
});

'/dist'
    },plugins: [HTMLWebpackPluginConfig]
}
  • template: 表示源文件来自
  • filename:目标文件的名称
  • inject: 'body'表示把对dist/index_bundle.js文件的引用，放到目标文件dist/index.html的body部分

【Webpack的一些指令】

webpack webpack -w //监测文件变化 webpack -p //不仅包括转换，还包括最小化文件

【Babel】

Babel可以用来把JSX文件转换成js文件。与Babel相关的安装包括：

npm install --save-dev babel-core npm install --save-dev babel-loader npm install --save-dev babel-preset-react

  • babel-core: 就是babel本身
  • babel-loader:用来加载
  • babel-preset-react:用来完成JSX到JS的文件转换

在项目根文件夹下创建.babelrc文件。

{
    "presets": ["react"]
}

把babel-loader放到webpack.config.js文件的设置中去。

module: {
        loaders: [
            {
                test: /\.js$/,21); line-height:1.8">"babel-loader"
            }
        ]
    },plugins: [HTMLWebpackPluginConfig]
}


参考：http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/ 

babel tsc webpack

babel tsc webpack

我要用啥？
js的话：babel编译+webpack模块打包
ts的话：tsc编译成js+babel编译+webpack模块打包
浏览器情况：如果您的浏览器支持es6所有语法那么就可以只用webpack来处理模块部分，如果你的浏览器连模块部分也支持，那我觉得就不需要任何工具了。当然如果你只是写了es5的语法也没有模块，那么也不需要任何工具
服务器情况：如果你用的是node，那么node是直接支持js新老语法和模块化的，也不需要任何工具，顶多你需要做得就是用tsc将其转为js这一步就行了

工具干什么的？
tsc：typescript自己的cli，编译ts为js，如果编译成es6了，浏览器不兼容，他也不管，他只管编译成js。这个时候就需要babel出场了
babel：编译新版js适配浏览器的代码，如果有新语法 或者新api，他会将其新语法转成老语法，新api做垫片处理来兼容，总之他能搞定就对了，但是他无法处理模块化
webpack：主要用来处理模块化的，当然也能打包 压缩等。因为babel不会处理模块化部分比如import export require等

 


多管闲事的这些家伙们？

babel的进化
babel7已经可以直接支持编译tc了，这样一来tsc就没用用处了。
但是，tsc是微软自己发明支持人家ts的工具，编译出来的代码我看了下，要比babel干净，适合人看。
究其原因是因为tsc只管编译成js，而不管兼容性，而babel自然还要做语法转义和垫片处理

 

webpack的附加功能

webpack不仅仅能处理模块，它能够将这些[tsc、babel]工具以plugin或者loader的形式包容进去，这样一来，我们也可以不单独再额外的用babel去处理兼容问题了
我们可以在webpack里使用ts-loader或者只用babel-loader做处理

总结
所以最后的总结是：我们只用webpack就行了，就可以把js或者ts搞定，编译成浏览器可执行的代码

 

悄悄话

除了webpack能解决模块化方案，你的选择还有browserify，它和webpack处理模块化思路一样，都是预编译。
另外如果你知道sea.js和require.js那么用这种类库的方式来支持其对应的模块语法也行。

 

配置文件

webpack的ts-loader实际上就是调用了tsc命令  所以需要tsconfig.js配置文件
webpack的babel-loader实际上就是调用了babel命令，也需要babel.config.js配置文件，但是我看大家将配置整合在了webpack中，可能少建一个文件吧

如果单独使用babel工具去处理ts的话，是不需要额外的安装ts和创建tsconfig.json的，那么对应的babel-loader也一样，
大致意思就是说，使用我babel处理ts就不用再安装任何ts第三方相关的东西了，我自己知道怎么处理。



Babel 处理 webpack 无法处理的 ES 语法（Babel 6.x 和 Babel 7.x 有区别）（二）

Babel 处理 webpack 无法处理的 ES 语法（Babel 6.x 和 Babel 7.x 有区别）（二）

//这是main.js是我们项目的js入口文件

//1:a导入jQuery,引入jQuery包用$变量接收，此方法与node中 const $ = require(''jquery'') 同
//此为ES6中导入模块的方式
//由于ES6的语法太高级，浏览器解析不了次引入方式
import $ from ''jquery''

import ''./css/index.scss''

//class关键字，是ES6中提供的新语法，用来实现 ES6 中面向对象变成方法
class Person{
    //使用static可以定义静态属性
    //所谓静态属性，就是可以通过类名直接访问的属性
    //实例属性，只能通过类的实例来访问的属性叫做实例属性
    static info = { name: ''zs'', age: ''20'' }
}

console.log(Person.info);
//在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法和 ES7 语法，webpack 处理不了，这时候就需要借助第三方的loader，来帮助 webpack 处理这些更高级的语法，
//当第三方loader 把高级语法转为低级语法之后，会把结果交给webpack 去打包到bundle.js中
//通过Babel，可以帮助我们将高级语法转换为低级语法，
//1：在 webpack 中，可以运行如下两套命令， 安装两套包，全装 Bable 相关的loader功能；
//1.1：第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//1.2：第二套：cnpm i babel-preset-env babel-preset-stage-0 -D
//2:打开 webpack 的配置文件，在module 节点下的 rules 数组中，添加一个新的匹配规则
//2.1：{ test:/\.js$/, use:''babel-loader'''', exclude:/node_modules/ }
//2.2：注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
//  2.2.1：如果不排除 node_modules，则 babel 会把 node_modules 中所有的第三方 js 文件，都打包编译，这样会非常消耗CPU，同时打包速度非常慢。
//  2.2.2 哪怕，最终 babel 把所有 node_modules 中的 js 转换完毕了，但是项目也无法正常运行
//3：在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于JSON 格式，所以此文件必须符合 JSON 语法规范，不写注释，字符串必须用双引号
// 3.在 .babelrc 写如下配置：(可以把 presets 看做语法的意思)
    // {
    //     “presets”: ["env","stage-0"],
    //     "plugins": ["transform-runtime"]
    // }



//这样创建一个对象，和java，c#实现面向对象的方法一样，class后端借鉴过来的，来实现面向对象
// var p1 = new Person();

 上面是mian.js

下面创建 .babelrc文件在根目录

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

 然后在 webpack.config.js 中添加 Babel 加载器：

{ test:/\.js$/, use: ''babel-loader'', exclude: /node_modules/ } //配置 babel 转化ES6 语法


上面的做法是 Babel^6x 版本的使用方法，babel在2018年9月份升级了一个大的版本 Babel 7.x，语法有了很大的变动，所以我上面运行的指令已经被out了，必须使用新语法，如下：
新命令如下适合 Babel 7.x和webpack 4 搭配：
  • 安装babel插件
    • 　　运行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
    • 　　运行 cnpm i @babel/preset-env @babel/preset-stage-0 -D
  • 安装能够识别转换jsx语法的包 babel-preset-react
    • 　　运行 cnpm i @babel/preset-react -D
  • 执行命令：cnpm i @babel/plugin-proposal-class-properties -D
  • 执行命令：cnpm i @babel/runtime -D
  • 添加 .babelrc 配置文件：
{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

最后在 webpack.config.js 中配置上：

{ test:/\.js$/, use: ''babel-loader'', exclude: /node_modules/ } //配置 babel 转化ES6 语法

 

 

关于为什么我必须将babel-presets放在.babelrc和webpack.config.js中？的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于.babelrc和babel.config.js的相同配置不能合并、babel - 使用Webpack和Babel来搭建React应用程序、babel tsc webpack、Babel 处理 webpack 无法处理的 ES 语法（Babel 6.x 和 Babel 7.x 有区别）（二）的相关知识，请在本站寻找。

本文标签：

上一篇无法在已卸载的组件上调用setState（或forceUpdate）（卸载时无法使用此产品安装源）

下一篇如何利用旅游软件系统做一个旅游网站？（如何利用旅游软件系统做一个旅游网站呢）

相关文章