1.接入Babel
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
},
]
}
2.设置babel的配置文件(其中plugins 需要那些插件,Presets预设新的语法特性)
// a.可以使用.babelrc
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": ["transform-runtime"]
}
{
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
],
"presets": [
[
"es2015",
{
"modules": false
}
],
"stage-2", // 标准
"react", // 如果使用react,必须要加上
]
}
// b.可以使用.babel.config.js
module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {libraryName: 'ant-design-vue', style: 'css'}, 'ant-design-vue'],
['import', {
libraryName: 'lodash',
libraryDirectory: '',
camel2DashComponentName: false, // default: true
}]
]
};
3.需要下载的插件
# babel正常运行需要它减少冗余代码,辅助函数替换导入语句
transform-runtime:npm i -D babel-plugin-transform-runtime
# Webpack 接入 Babel 必须依赖的模块
npm i -D babel-core babel-loader
# Plugins 或 Presets 根据你的需求选择不同的
npm i -D babel-preset-env
// react支持JSX语法
babel-preset-react
4.接入TS
# tsconfig.js 新建
{
"compilerOptions": {
"noImplicitAny": true,
"removeComments": true,
"importHelpers" : true, // 不让辅助函数重复多个
},
"exclude": {
"node_modules"
}
"awesomeTypescriptLoaderOptions": {
/* ... */
}
}
// vue项目
{
"compilerOptions": {
// 构建出 ES5 版本的 JavaScript,与 Vue 的浏览器支持保持一致
"target": "es5",
// 开启严格模式,这可以对 `this` 上的数据属性进行更严格的推断
"strict": true,
// TypeScript 编译器输出的 JavaScript 采用 es2015 模块化,使 Tree Shaking 生效
"module": "es2015",
"moduleResolution": "node"
}
}
# [typescript ts => js](https://github.com/s-panferov/awesome-typescript-loader)
npm install -g typescript // 全局安装不推荐
# loader 推荐使用,速度更快
npm install awesome-typescript-loader --save-dev